import React, { useState, useEffect } from 'react';
import { List, message, Avatar, Skeleton, Divider, Image } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import styles from './image.less';



const ContainerHeight = 600;

const InfiniteListExample = () => {

    const [pageNo, setPageNo] = useState(1);

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);

    const loadMoreData = () => {
        if (loading) {
            return;
        }
        setLoading(true);
        fetch(`https://api.unsplash.com/photos?client_id=1c0018090c0878f9556fba12d4b8ba060866de2733de1cc8486c720bf7c9a04e&order_by=latest&page=${pageNo}&per_page=20`)
            .then(res => res.json())
            .then(body => {
                setData([...data, ...body]);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };

    useEffect(() => {
        setPageNo(pageNo + 1)
        loadMoreData();
    }, []);


    return (

        <div
            id="scrollableDiv"
            style={{
                height: 600,
                overflow: 'auto'
            }}
        >
            <InfiniteScroll
                dataLength={data.length}
                next={loadMoreData}
                hasMore={data.length < 50}
                // loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
                // endMessage={<Divider plain>--end--</Divider>}
                scrollableTarget="scrollableDiv"
            >
                <List
                    dataSource={data}
                    split={true}
                    style={{ overflowX: "hidden" }}
                    renderItem={item => (
                        <List.Item key={item.id} style={{ padding: "0" }}>
                            <div className={styles.container}>
                                <Image
                                    src={item.urls.regular}
                                    width={300}
                                    height={170}
                                    preview={false}
                                    placeholder={
                                        <Image
                                            preview={false}
                                            src={item.urls.thumb}
                                            width={300}
                                            height={170}
                                            placeholder={
                                                <div className={styles.loadding}  >加载中</div>
                                            }
                                        />
                                    }
                                    style={{ objectFit: "cover" }} />

                                <div className={styles.setup}
                                    onClick={() => window.api.setWallPaperByUrl(item.urls.raw, item.id)}
                                >&nbsp;&nbsp;&nbsp;&nbsp;设置为桌面&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            </div >

                        </List.Item>
                    )}
                />
            </InfiniteScroll>
        </div >


        // <List>
        //     <VirtualList
        //         data={data}
        //         height={ContainerHeight}
        //         itemHeight={47}
        //         itemKey="id"
        //         onScroll={onScroll}
        //     >
        //         {item => (
        //             <List.Item key={item.id}>
        //                 <Image src={item.urls.regular} width={300} height={200} preview={false} style={{ objectFit: "cover" }} />
        //             </List.Item>
        //         )}
        //     </VirtualList>
        // </List>
    );
};


export default InfiniteListExample;
